<template>
    <rx-layout>
        <template #middle>
            <rx-fit v-model="fitSearch" :searchBox="'middle'">
                <template #head>
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div class="table-operator">
                            <a-button type="primary" style="margin-left: 10px;" @click="add()">
                                <template #icon>
                                    <plus-outlined/>
                                </template>
                                {{ $ti18('rxList.newBtn', '新建') }}
                            </a-button>
                            <a-button v-if=" selectedRowKeys.length > 0 ||  selectedRowKeys.length > 0"
                                      type="primary" danger style="margin-left: 10px;" @click="delByIds(selectedRowKeys)">
                                <template #icon>
                                    <DeleteOutlined />
                                </template>
                                {{ $ti18('rxList.delBtn', '删除') }}
                            </a-button>
                        </div>
                        <span class="search-btn" @click.stop="searchshow" @mousedown.stop><SearchOutlined/>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
                    </div>
                </template>
                <template #search>
                    <rx-fit>
                        <template #middle>
                            <a-form layout="vertical">
                                <a-form-item :label="i18n('form.modelName','名称')">
                                    <a-input :placeholder="i18n('form.modelName','名称')"
                                             v-model:value="urlConfig.queryParam.Q_NAME__S_LK"/>
                                </a-form-item>
                                <a-form-item :label="i18n('list.type','来源类型')">
                                    <a-select allowClear
                                              v-model:value="urlConfig.queryParam.Q_SOURCE_TYPE__S_EQ"
                                              :getPopupContainer="(p)=>p.parentNode">
                                        <a-select-option value="dataSource">
                                            {{i18n('form.dataSource', '数据源')}}
                                        </a-select-option>
                                        <a-select-option value="interface">
                                            {{i18n('form.interface', '接口') }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-form>
                            <div class="list-search-toolbar">
                                <a-button type="primary" @click="search">
                                    <SearchOutlined/>
                                    {{ $ti18('rxList.searchBtn', '查询') }}
                                </a-button>
                                <a-button style="margin-left: 4px" @click="resetSearch">
                                    {{ $ti18('rxList.resetBtn', '重置') }}
                                </a-button>
                            </div>
                        </template>
                    </rx-fit>
                </template>
                <template #middle>
                        <rx-grid
                            ref="table"
                            :columns="columns"
                            url="/api-screen/screen/core/screenDataModel/query"
                            :hasPage="true"
                            field="ID_"
                            :urlConfig="urlConfig"
                            :selectConfig="selectConfig"
                            @selectMethod="onSelectMethod"
                        >
                            <template #action="obj">
                                <RxGridAction :size="2">
                                    <span @click="design(obj.row)">{{ $ti18('rxList.editBtn', '编辑') }}</span>
                                    <span @click="delByIds([obj.row.id])">{{ $ti18('rxList.delBtn', '删除') }}</span>
                                </RxGridAction>
                            </template>
                            <template #sourceType="{row}">
                                <a-tag v-if="row.sourceType" :color="typeMap[row.sourceType].color">
                                    <span>{{ typeMap[row.sourceType].text }}</span>
                                </a-tag>
                            </template>
                        </rx-grid>
                </template>
            </rx-fit>
        </template>
    </rx-layout>
</template>

<script>
import ScreenDataModelApi from '@/api/screen/core/screen-data-model.js'
import DataSourceDesign from './data-source-design.vue'
import InterfaceDesign from './interface-design.vue'
import ScreenModal from './screen-modal.vue'
import {RxGrid, RxLayout, Util, BaseList, RxGridAction, RxFit} from '@lowcode/jpaas-base-lib';
import useMain from "../../../../stores/use-main";
import {mapState} from 'pinia';
import { App } from '@lowcode/jpaas-share-component';
export default {
    name: 'ScreenDataModelList',
    mixins: [BaseList,App],
    components: {
        RxGrid,
        RxLayout,
        RxGridAction,
        RxFit
    },
    computed: {
        ...mapState(useMain, ["appId"])
    },
    data() {
        return {
            columns: [
                {title: this.i18n('form.modelName', '名称'), field: 'name'},
                {title: this.i18n('list.type', '来源类型'), field: 'sourceType', slots: {default: 'sourceType'}},
                {title: this.$ti18('rxForm.createTime', '创建时间'), field: 'createTime'},
                {
                    title: this.$ti18('rxList.action', '操作'),
                    width: 100,
                    field: 'action',
                    fixed: 'right',
                    showOverflow: false,
                    slots: {default: 'action'}
                }
            ],
            mode: "dataSource",
            typeMap: {
                'interface': {color: 'blue', text: this.i18n('form.interface', '接口')},
                'dataSource': {color: 'green', text: this.i18n('form.dataSource', '数据源')},
            },
            data: [],
            urlConfig: {
                ajaxType: 'post',//请求类型 post/get
                contentType: 'json',//类容类型
                queryParam: {},//请求参数
                //dataField,根据返回的参数来确定取哪一层的数据 如 res = { data:[] } ->  dataField:'data'
                // 如 res = { list:{data:[]} } -> dataField:'list.data' 依次类推;
                dataField: 'result.data',
                totalField:'result.totalCount'
            },
            selectConfig: {
                type: 'checkbox',//checkbox复选 / radio单选
                width: '60',
                trigger: 'row',//触发条件 row点击行 cell点击单元格 default点击控件本身
                checkMethod: ""
            },
        }
    },
    created() {
        let appId = this.appId;
        if (appId) {
            this.urlConfig.queryParam.Q_APP_ID__S_EQ = appId;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "screenLang", key);
        },
        delById(ids) {
            return ScreenDataModelApi.del({ids: ids.join(',')});
        },
        add() {
            this.mode = "dataSource";
            let self = this;
            Util.open({
                component: ScreenModal,
                curVm: this,
                widthHeight: ['750px', '450px'],
                title: this.i18n("list.selectModel", "选择模式"),
                data: {
                    mode: this.mode
                },
                zIndex:999,
            }, function (action, data) {
                if (action != "ok") return;
                self.mode = data;
                self.design();
            });
        },
        design(record) {
            let self = this;
            let component = "";
            //数据源
            if ((record && record.sourceType == 'dataSource') || (!record && this.mode == 'dataSource')) {
                component = DataSourceDesign;
            } else {
                //第三方接口
                component = InterfaceDesign;
            }
            Util.open({
                component: component,
                curVm: this,
                max: true,
                title: this.i18n("list.modelDesign", "数据模型设计"),
                data: {
                    dataMode: record || {},
                    pkId: record ? record.pkId : ""
                },
                zIndex:999,
            }, function (action) {
                if (action != "ok") return;
                self.$refs.table.loadData();
            });
        },
        search() {
            this.$refs.table.loadData()
        },
        resetSearch() {
            this.urlConfig.queryParam = {}
            this.$nextTick(() => {
                this.urlConfig.queryParam = {};
                let appId = this.curApp.appId;
                if (appId) {
                    this.urlConfig.queryParam.Q_APP_ID__S_EQ = appId;
                }
                this.$refs.table.loadData();
            })
        },
    }
}
</script>
<style scoped>
.table-operator {
    padding: 4px;
}

.table-operator button {
    margin: 2px;
}
</style>

